<template>
  <view>
    <tc-calendar ref="calendar" :date="date" :selected="selected" @monthSwitch="monthSwitch" @change="handleSelect"
      @weekPlanClick="weekPlanClick" @datePlanClick="datePlanClick" lunar :isScan="true" />
    <!-- <view style="padding: 30px 15px;">
      当前表单日期：<text style="color: #409eff">{{ date }}</text>
    </view>
    <view style="padding: 30px 15px;">
      自定义内容：<text style="color: #409eff">{{ date }} >>>>>> {{ '无' }}</text>
    </view> -->
    <nut-popup v-model:visible="visible" position="bottom" z-index="999">
      <view class="region-header">

        <text class="region-title">工作计划详情
        </text>
        <nut-icon name="close" @click="visible = false" />
      </view>
      <view class="region-content">

        <view class="region-task-title">
          周计划
        </view>
        <view class="row-container">
          <view class="group-title">本周应提 <view class="group-content">{{currentData.subUserNum}}</view>
          </view>
          <view class="group-title">交提交 <view class="group-content">{{currentData.planCommitUserNum}}</view>
          </view>

        </view>


        <view class="region-task-title">
          日报
        </view>
        <view class="row-container">
          <view class="group-title">今日应提 <view class="group-content">{{currentData.subUserNum}}</view>
          </view>
          <view class="group-title">已提交 <view class="group-content">{{currentData.dayCommitUserNum}}</view>
          </view>

        </view>



      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { querySubordinatePlans } from '@/services/plan';
  import { useMemberStore } from '@/stores';
  /**
   * 本组件是基于uni-calendar（V1.5.5）之上增加了一些个性化功能点，如打卡日历，日历日程，日历排班，打卡排班等功能
   * 小点的位置 point.position [1, 2, 3, 4, 5, 6] 红点位置，[左上角, 右上角, 右下角, 左下角, 上中间, 下中间]
   * 小点的颜色  point.color 如 #000 #fff
   * 日期数字下方的自定义文本  info
   * text.size 自定义文本字体大小 如 12 14 16
   * text.color 自定义文本颜色 如 #000 #fff
   */
  const calendar = ref({})
  const date = ref('')
  const selected = ref()
  const infoText = ['未提交', '查看', '休假']
  const planList = ref([])
  const currentData = ref<any>({})

  const userInfo = useMemberStore().getUserInfo()

  //底部弹窗是否展示
  const visible = ref(false)

  onMounted(() => {
    // init()
  })

  //页面加载
  onLoad(() => {
    console.log('onLoad')

  })
  onShow(() => {
    initDate()
  })
  //获取当月所有日期的数组 初始化数据
  const initDate = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 月份从 0 开始（0=1月）

    setDate(year, month);


  }
  /**
   * 设置数据
   */
  const setDate = (year : number, month : number) => {
    // 获取当月第一天和最后一天
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0); // 下个月第0天 = 本月最后一天
    console.log(firstDay + ' ' + lastDay)
    const dates = [];
    querySubordinatePlans({

      yearMonth: `${year}${month < 10 ? '0' + month : month}`

    }).then((res : any) => {

      planList.value = res
      calendar.value.setPlanList(planList.value)
    })

  }


  /**
   * 选中
   */
  const handleSelect = (e : any) => {
    console.log(e)
    visible.value = true
    date.value = e.fulldate
    currentData.value = e
  }
  //周计划点击
  const weekPlanClick = (item : any) => {
    console.log('item', item)
    uni.navigateTo({
      url: `/pagesMember/workScan/selectUser?data=${JSON.stringify(item)}`
    })


  }

  //日报点击
  const datePlanClick = (item : any) => {
    console.log('item', item)
    uni.navigateTo({
      url: `/pagesMember/workScan/selectUser?data=${JSON.stringify(item)}`
    })
    // if (item.dataState == null || item.dataState == 'undefined') {
    //   uni.showToast({
    //     title: '请先提交周计划',
    //     icon: 'none'
    //   })
    //   return
    // }
    // if (item.dataState == 0) {
    //   uni.showToast({
    //     title: '周计划审核中...',
    //     icon: 'none'
    //   })
    //   return
    // }
    // //审批中 已通过
    // if (item.dayStatus == 1 || item.dayStatus == 2) {
    //   uni.navigateTo({
    //     url: `/pagesMember/workCalendar/workFeedbackDetail?data=${JSON.stringify({
    //       ...item
    //     })}`
    //   })
    // } else {//未提交或者驳回
    //   if (!isDateInCurrentWeek(item.fullDate)) {
    //     uni.showToast({
    //       title: '只能提交本周内的日报',
    //       icon: 'none'
    //     })
    //     return
    //   }
    //   uni.navigateTo({
    //     url: `/pagesMember/workCalendar/workFeedback?data=${JSON.stringify({
    //       ...item
    //     })}`
    //   })
    // }

  }
  /**
   * 判断给定的日期范围是否属于本周或下周
   * @param {string} beginDate - 开始日期，格式为 "YYYY-MM-DD"
   * @param {string} endDate - 结束日期，格式为 "YYYY-MM-DD"
   * @returns {string} - 返回 "本周"、"下周" 或 "不在本周或下周"
   */
  function checkWeekRange(beginDate : any, endDate : any) {
    // 将字符串日期转换为Date对象
    const begin = new Date(beginDate);
    const end = new Date(endDate);
    begin.setHours(0, 0, 0, 0)
    end.setHours(0, 0, 0, 0)
    console.log(begin + '  ' + end)

    // 获取当前日期
    const today = new Date();
    today.setHours(0, 0, 0, 0); // 清除时间部分

    // 计算当前周的起始和结束日期（周一至周日）
    const currentWeekStart = new Date(today);
    const dayOfWeek = today.getDay(); // 0是周日，1是周一，...，6是周六
    const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // 调整为周一作为一周的第一天
    currentWeekStart.setDate(today.getDate() + diffToMonday);
    currentWeekStart.setHours(0, 0, 0, 0);

    const currentWeekEnd = new Date(currentWeekStart);
    currentWeekEnd.setDate(currentWeekStart.getDate() + 6);

    // 计算下周的起始和结束日期
    const nextWeekStart = new Date(currentWeekStart);
    nextWeekStart.setDate(currentWeekStart.getDate() + 7);

    const nextWeekEnd = new Date(currentWeekEnd);
    nextWeekEnd.setDate(currentWeekEnd.getDate() + 7);
    console.log(currentWeekStart + '  ' + currentWeekEnd)
    // 检查日期范围是否完全在本周内
    const isCurrentWeek = begin >= currentWeekStart && end <= currentWeekEnd;

    console.log(nextWeekStart + '  ' + nextWeekEnd)
    // 检查日期范围是否完全在下周内
    const isNextWeek = begin >= nextWeekStart && end <= nextWeekEnd;

    // 检查日期范围是否跨越本周和下周（部分在本周，部分在下周）
    const isOverlapping = (begin <= currentWeekEnd && end >= nextWeekStart);

    if (isCurrentWeek) {
      console.log('本周')
      return true;
    } else if (isNextWeek || isOverlapping) {
      console.log('下周')
      return true;
    } else {
      console.log('非本周或下周')
      return false;
    }
  }

  //是否属于当前周
  const isInRange = (bengin : any, end : any) => {
    const benginDate = new Date(bengin)
    const endDate = new Date(end)
    const currentDate = new Date()
    return currentDate >= benginDate && currentDate <= endDate
  }

  /**
   * 判断给定日期属于本周、下周还是上周
   * @param {Date} date - 要判断的日期
   * @param {Date} [referenceDate=new Date()] - 参考日期（默认为当前日期）
   * @returns {boolean} - 返回 'thisWeek', 'nextWeek' 或 'lastWeek' true
   */
  function getWeekRelation(date : any, referenceDate = new Date()) {
    // 克隆日期对象以避免修改原始对象
    const refDate = new Date(referenceDate);
    const targetDate = new Date(date);

    // 设置参考日期为本周的周一（ISO标准，周一为一周的第一天）
    const refDayOfWeek = refDate.getDay(); // 0 (周日) 到 6 (周六)
    const refMonday = new Date(refDate);
    refMonday.setDate(refDate.getDate() - (refDayOfWeek === 0 ? 6 : refDayOfWeek - 1));
    refMonday.setHours(0, 0, 0, 0);

    // 计算下周周一和上周周一
    const nextMonday = new Date(refMonday);
    nextMonday.setDate(refMonday.getDate() + 7);

    const lastMonday = new Date(refMonday);
    lastMonday.setDate(refMonday.getDate() - 7);

    // 清除目标日期的时间部分
    targetDate.setHours(0, 0, 0, 0);

    // 判断日期关系
    if (targetDate >= refMonday && targetDate < nextMonday) {//本周
      return true;
    } else if (targetDate >= nextMonday && targetDate < new Date(nextMonday.getTime() + 7 * 24 * 60 * 60 * 1000)) {//下周
      return true;
    } else if (targetDate >= lastMonday && targetDate < refMonday) {//上周
      return false;
    } else {
      // 如果不在这三周范围内，可以返回或抛出错误，或者扩展功能
      return false;
    }
  }
  /**
   * 判断某个日期是否属于本周
   * @param {Date|string} targetDate - 目标日期（Date 对象或 "YYYY-MM-DD" 字符串）
   * @returns {boolean} - 是否属于本周
   */
  function isDateInCurrentWeek(targetDate : any) {
    // 如果传入的是字符串，转换为 Date 对象
    const date = typeof targetDate === 'string' ? new Date(targetDate) : new Date(targetDate);

    // 获取当前日期
    const today = new Date();

    // 计算本周一的日期（以周一作为一周的第一天）
    const currentWeekMonday = new Date(today);
    currentWeekMonday.setDate(today.getDate() - today.getDay() + 1); // getDay() 周日是 0，周一是 1，...，周六是 6
    currentWeekMonday.setHours(0, 0, 0, 0); // 清除时间部分，确保比较的是日期

    // 计算本周日的日期
    const currentWeekSunday = new Date(currentWeekMonday);
    currentWeekSunday.setDate(currentWeekMonday.getDate() + 6);
    currentWeekSunday.setHours(23, 59, 59, 999); // 设置为周日最后一刻

    // 判断目标日期是否在本周范围内
    return date >= currentWeekMonday && date <= currentWeekSunday;
  }


  //月份切换
  const monthSwitch = (e : any) => {
    console.log(e)
    setDate(e.year, e.month)
  }
  //日期转字符串格式
  const dateToStr = (date : any) => {
    var year = date.getFullYear() //年
    var month = date.getMonth() //月
    var day = date.getDate() //日
    var hours = date.getHours() //时
    var min = date.getMinutes() //分
    var second = date.getSeconds() //秒
    return year + "-" +
      ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
      (day > 9 ? day : ("0" + day)) + " " +
      (hours > 9 ? hours : ("0" + hours)) + ":" +
      (min > 9 ? min : ("0" + min))
  }
  //字符串转日期
  const strToDate = (str : string) => {
    var date = new Date(str)
    return date.getTime()

  }
</script>

<style lang="scss">
  .region-content {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx;
    margin-bottom: 40rpx;
    font-style: bold;
  }

  .region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 16rpx;
    font-size: 32rpx;
  }

  .region-task-title {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    flex-grow: 1;
    font-size: 32rpx;
    dispaly: flex;
    flex-direction: row;
    align-items: center;

    &:before {
      content: "";
      margin-left: 15px;
      padding-left: 8px;
      border-left: 10rpx solid #54B9CC;
      height: 35rpx;
      display: inline-block;
      vertical-align: middle;
    }
  }



  .row-container {
    margin: 40rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .region-title {
    flex-grow: 1;
    text-align: center;
  }

  .group-title {
    color: #888E98;
    font-size: 28rpx;
  }

  .group-content {
    color: black;
    font-size: 36rpx;
    margin-top: 10rpx;
    font-weight: bold;
    text-align: center;
  }

  .line {
    width: 10rpx;
    height: 35rpx;
    margin-right: 10rpx;
    background-color: #54B9CC
  }

  .options {
    height: 600rpx;
    padding: 20rpx 0;

    .option-item {
      padding: 25rpx 30rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: row;
      background: #FFFFFF;
      justify-content: space-around;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx solid #eee;

      .option-text {
        flex-grow: 1;
      }

      &.active {
        color: #2979ff;
      }
    }
  }
</style>
